<template>
  <el-container>
    <el-aside width="200px" style="margin-left:20px;position:relative;flex:none;height:600px">
      <div class="tree">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :props="defaultProps"
        />
      </div>
    </el-aside>
    <el-container style="position:relative;flex:auto">
      <el-main style="margin-left:20px;position: relative;">
        <el-form>
          <el-form-item label="地区关键词">
            <el-input placeholder="请输入地区关键词" class="map" />
          </el-form-item>
        </el-form>
        <div class="block">
          <img src="../../../assets/map.png" alt="">
        </div>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      data: [
        {
          id: 1,
          label: '东北转运中心'
        }, {
          id: 2,
          label: '华北转运中心'
        },
        {
          id: 1,
          label: '华中转运中心',
          children: [{
            id: 3,
            label: '武汉分拣中心',
            children: [{
              id: 9,
              label: '汉江营业部'
            },
            {
              id: 10,
              label: '武昌营业部'
            }]
          }]
        },
        {
          id: 2,
          label: '华东转运中心',
          children: [{
            id: 3,
            label: '上海分拣中心',
            children: [
              {
                id: 9,
                label: '虹口营业部'
              },
              {
                id: 10,
                label: '浦东新区营业部'
              }
            ] }
          ] },
        {
          id: 3,
          label: '西南转运中心',
          children: [{
            id: 4,
            label: '成都分拣中心',
            children: [
              {
                id: 9,
                label: '青羊区营业部'
              }
            ] }
          ]
        }, {
          id: 1,
          label: '金牛区营业部'
        }, {
          id: 1,
          label: '西安转运中心',
          children: [{
            id: 5,
            label: '碑林区营业部'
          }, {
            id: 6,
            label: '长安区营业部'
          }]
        }
      ] }
  }
}
</script>

<style scoped>
  ::v-deep .el-aside {
    background-color: #ffffff;
    /* color: #333; */
    text-align: center;
    line-height: 200px;
  }

  ::v-deep .el-main {
    background-color: #fff;
    position: relative;
    height:600px
  }
  /* ::v-deep .map{
    height: 900px;
  } */

::v-deep .text{
  height: 50px;
  background-color: aquamarine;

}
::v-deep .map{
  width: 200px;
}
</style>
